<template>
  <div>
    <a-card>
      <a-divider orientation="right">
        <a-space>
          <a-button type="primary" @click="addDetail">新增</a-button>
          <a-button status="success" @click="save">保存</a-button>
        </a-space>

      </a-divider>
      <a-table
        :bordered="false"
        :data="renderData"
        :pagination="false"
        row-key="id"
        multiple
      >
        <template #columns>
          <a-table-column :width="60" title="序号">
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column data-index="accountSetId" title="账套" min-width="200">
            <template #cell="{ record }">
             <a-input v-model="record.accountSetId" placeholder="请输入" />
            </template>
          </a-table-column>
          <a-table-column data-index="assistComputId" title="辅助核算项目" width="300">
            <template #cell="{ record }">
              <a-select v-model="record.assistComputId" placeholder="请选择">
                <a-option
                  v-for="(item, key) in options"
                  :key="key"
                  :value="item.value"
                >{{ item.label }}
                </a-option>
              </a-select>
            </template>
          </a-table-column>
          <a-table-column
            :title="$t('columns.operations')"
            data-index="operations"
            fixed="left"
            :width="80"
          >
            <template #cell="{ record }">
              <a-popconfirm
                :content="$t('operations.popConfirm.delete')"
                type="error"
                @ok="handleClickToDel(record.id)"
              >
                <a-button type="text" size="small" status="danger">
                  {{ $t('columns.operations.delete') }}
                </a-button>
              </a-popconfirm>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script setup lang="ts">

import { ref } from "vue";
import {
  AccountSubject2AssisteComputDTO,
  createAssistComput2AccountSubject, deleteAssistComput2AccountSubject,
  getAssistComputs,
  updateAssistComput2AccountSubject
} from "@/api/invoice";
import useLoading from "@/hooks/loading";
import { Message } from "@arco-design/web-vue";

const {loading,setLoading} = useLoading();
const options = ref<any>([
  { label: '结算方式', value: 'SettleStyle' },
  { label: '账号', value: 'BankAccount' },
  { label: '部门', value: 'AuxAccDepartment' },
  { label: '存货', value: 'AuxAccInventory' },
  { label: '项目', value: 'AuxAccProject' },
  { label: '员工', value: 'AuxAccPerson' },
  { label: '往来单位', value: 'AuxAccCustomer' }
]);
const subjectId = ref("");
const renderData = ref<AccountSubject2AssisteComputDTO[]>([]);
const addDetail = () =>{
  const index = renderData.value.length;
  renderData.value.push({
    id: index.toString(),
    accountSetId: "",
    assistComputId: "",
    subjectId: subjectId.value
  });
}
const getList = async (id: string) =>{
  try {
    renderData.value = [];
    setLoading(true);
    const { data } = await getAssistComputs(id);
    renderData.value = data;
  }catch (e) {
    // you can report use errorHandler or other
  }finally {
    setLoading(false);
  }
}
const save = async () => {
  try {
    setLoading(true);
    const createList:AccountSubject2AssisteComputDTO[] = [];
    const updateList:AccountSubject2AssisteComputDTO[] = [];
    if (renderData.value && renderData.value.length>0){
      renderData.value.forEach(item=>{
        if (item.id && item.id.length>4){
          updateList.push(item);
        }else{
          createList.push(item);
        }
      })
    }
    if (createList.length>0){
      await createAssistComput2AccountSubject(createList);
    }
    if (updateList.length>0) {
      await updateAssistComput2AccountSubject(updateList);
    }
    Message.success('操作成功');
  }catch (e) {
    // you can report use errorHandler or other
  }finally {
    setLoading(false);
  }
}
const getAssistComputDetail = (code: string) =>{
  getList(code);
  subjectId.value = code;
}
const handleClickToDel = async (id: string) => {
  try {
    setLoading(true);
    if (id.length>4){
      await deleteAssistComput2AccountSubject(id);
      Message.success('操作成功');
    }else {
      renderData.value = renderData.value.filter(
        (x) => x.id !== id
      );
    }
  }catch (e) {
    // you can report use errorHandler or other
  }finally {
    setLoading(false);
  }
};
defineExpose({getAssistComputDetail})
</script>
<style scoped lang="less">

</style>
